<template>
  <div class="goodsEdit">
    <h1 class="mb-3">审核商品</h1>
    <el-form class="d-flex flex-wrap" label-width="100px" :rules="formPassRules" :model="formPass" ref="formPass">
      <div class="w45 d-flex flex-column space-around">
        <el-form-item label="标题">
          <el-input v-model="formPass.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品所属类别">
          <el-input v-model="formPass.cateLabel" disabled></el-input>
        </el-form-item>
      </div>

      <el-form-item label="背景图" class="w45 ml-3">
        <el-image :src="formPass.image">
          <div slot="error" class="image-slot d-center">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-form-item>
      <el-form-item label="描述" prop="description" class="w80">
        <Tinymce ref="editor" v-model="formPass.description" :height="200" disabled />
      </el-form-item>
      <el-form-item label="下单方式" prop="order_method" style="margin-bottom: 0;" class="w100">
        <el-checkbox-group v-model="formPass.order_method" disabled>
          <el-checkbox :label="item" name="order_method" v-for="(item, i) in orderMethodList" :key="i"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="已选择" class="w100">
        <div>{{ formPass.order_method }}</div>
      </el-form-item>
      <el-form-item label="价格" prop="price" style="width:400px">
        <el-input-number size="medium" :precision="2" controls-position="right" v-model="formPass.price" :min="0.01" disabled>
          <template slot="append">元 / 个</template>
        </el-input-number>
        <span class="ml-2">元 / 个</span>
      </el-form-item>
      <el-form-item label="默认下单数量" prop="default_num" style="width:300px">
        <el-input-number
          disabled
          size="medium"
          controls-position="right"
          :precision="0"
          v-model="formPass.default_num"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="商品下单状态" class="ml-2 w100">
        <el-radio-group v-model="formPass.on_shelf" disabled>
          <el-radio label="1">正常</el-radio>
          <el-radio label="0">关闭下单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="服务费：" prop="service_charge" class="ml-1">
        <el-radio-group v-model="formPass.service_charge">
          <el-radio v-for="(item, i) in serviceChargeList" :key="i" :label="item">{{ (item * 100).toFixed(0) + "%" }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="mt-3 w100">
        <el-button type="primary" @click="pass('formPass')"> 通<span class="large-gap"></span>过 </el-button>
      </div>
    </el-form>
    <el-form :inline="true" :rules="formNoPassRules" :model="formNoPass" ref="formNoPass" class="demo-form-inline mt-3">
      <el-form-item>
        <el-button type="primary" @click="noPass('formNoPass')">
          不<span class="sm-gap "></span>通<span class="sm-gap "></span>过
        </el-button>
      </el-form-item>
      <el-form-item label="原因：" prop="rejection" class="ml-1">
        <el-select
          style="width:400px"
          v-model="formNoPass.rejection"
          @change="handleChange"
          multiple
          filterable
          allow-create
          clearable
          placeholder="请选择不通过原因"
        >
          <el-option v-for="item in formNoPass.rejections" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="ml-1">
        <div>注意：找不到合适的不通过原因时也可以自行填写</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import lf from "localforage";

export default {
  props: ["id"],
  components: {
    Tinymce,
  },
  data() {
    return {
      value: [],
      orderMethodList: [],
      serviceChargeList: [],
      cateList: [
        // {
        //   value: "notes",
        //   label: "音符业务",
        //   children: [
        //     { value: "notesOnList", label: "音符上榜业务" },
        //     { value: "notesCancelOnList", label: "音符不上榜业务" },
        //     { value: "notesFans", label: "音符粉丝业务" },
        //     { value: "notesLike", label: "音符点赞业务" },
        //   ],
        // },
      ],
      formNoPass: {
        rejection: [],
        rejections: [
          { value: "商品标题填写不清楚", label: "商品标题填写不清楚" },
          { value: "商品所属类别选择错误", label: "商品所属类别选择错误" },
          { value: "背景图选择错误", label: "背景图选择错误" },
          { value: "商品描述填写不清楚", label: "商品描述填写不清楚" },
          { value: "商品标题含有违规词汇", label: "商品标题含有违规词汇" },
          { value: "商品描述含有违规词汇", label: "商品描述含有违规词汇" },
          { value: "含有违法违规信息", label: "含有违法违规信息" },
          { value: "含有敏感信息", label: "含有敏感信息" },
          { value: "含有违规信息", label: "含有违规信息" },
        ],
      },
      formNoPassRules: {
        rejection: [{ required: true, message: "请选择不通过原因", trigger: "change" }],
      },
      image: "",
      formPass: {
        name: "",
        image: "",
        cateValue: [],
        cateLabel: "",
        description: "",
        order_method: [],
        price: 0,
        default_num: 10,
        on_shelf: "1",
        service_charge: 0.1,
      },
      formPassRules: {
        service_charge: [{ required: true, message: "请选择服务费", trigger: "change" }],
      },
    };
  },
  beforeCreate() {
    // 禁用富文本编辑
    this.$store.commit("DisableEditor");
  },
  created() {
    this.findDictList();
    this.fetch();
  },
  mounted() {
    // document.querySelector("iframe").contentWindow.document.body.contentEditable = false;
  },
  methods: {
    handleChange(value) {
      // console.log(value);
    },
    // 获取下单方式列表和服务费列表
    async findDictList() {
      const { data: res } = await this.$http.post("findDictList");
      if (res.code != "0") return this.$message("获取信息失败！");
      this.orderMethodList = [];
      this.serviceChargeList = [];
      res.data.forEach((item) => {
        if (item.dict_name == "ORDER_METHOD") {
          this.orderMethodList.push(item.dict_lable);
        } else if (item.dict_name == "SERVICE_CHARGE") {
          this.serviceChargeList.push(+item.dict_lable);
        }
      });
      // console.log(this.serviceChargeList, "服务费");
    },

    noPass(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        let rejection = this.formNoPass.rejection.join("，");
        const formData = new FormData();
        formData.append("ids", [this.id]);
        formData.append("product_status", 2);
        formData.append("auditRemarks", rejection);
        const { data: res } = await this.$http.post("approvalProduct", formData);
        // console.log(res);
        if (res.code != "0") return this.$message("操作失败");
        this.$message.success("操作成功");
        this.$router.push("/productCheck/noPass");
      });
    },
    pass(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return this.$message.error("请选择服务费");
        const formData = new FormData();
        formData.append("ids", [this.id]);
        formData.append("product_status", 1);
        formData.append("service_charge", this.formPass.service_charge);
        formData.append("auditRemarks", "");
        const { data: res } = await this.$http.post("approvalProduct", formData);
        // console.log(res);
        if (res.code != "0") return this.$message("操作失败");

        this.$message.success("操作成功");
        this.$router.push("/productCheck/pass");
      });
    },
    async fetch() {
      const waitCheckGoods = await lf.getItem("waitCheckGoods");
      const arr = [];
      JSON.parse(waitCheckGoods.order_method).forEach((item) => {
        arr.push(item.name);
      });
      waitCheckGoods.order_method = arr;
      waitCheckGoods.on_shelf = waitCheckGoods.on_shelf.toString();
      this.formPass = waitCheckGoods;
      if (waitCheckGoods.rejection) this.formNoPass.rejection = waitCheckGoods.rejection.split("，");

      // console.log(waitCheckGoods, "待审核商品");
    },
  },
};
</script>

<style lang="scss">
.goodsEdit {
  padding-bottom: 50px;
  .el-cascader-menu__wrap {
    height: 180px !important;
  }
  .sm-gap {
    width: 5px;
    height: 10px;
    display: inline-block;
  }
  .large-gap {
    width: 20px;
    height: 10px;
    display: inline-block;
  }
  .el-image {
    width: 148px;
    height: 180px;
    .image-slot {
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 30px;
    }
    .el-image__inner {
      width: auto;
    }
  }
}
</style>
